<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
${aier_doctype}
<html <s:property value="aier_html_xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<title>${aier_title}</title>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css" />
<link rel="stylesheet" href="${aier_css_url}jcrop/jquery.Jcrop.min.css" />
<link rel="stylesheet" href="${aier_css_url}jcrop/jquery.Jcrop.css" />
<link rel="stylesheet" href="${aier_css_url}jp/msg.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="stylesheet" href="${aier_css_url}social/school/common.css" />
<link rel="stylesheet" href="${aier_css_url}social/school/smanage.css" />

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/hh/ui.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>

<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/afu.js"></script>
<script type="text/javascript" src="${aier_js_url}jcrop/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="${aier_js_url}jcrop/jquery.Jcrop.js"></script>

</head>
<style type="text/css">
.crop_preview {
	position: absolute;
	left: 25px;
	top: 15px;
	width: 100px;
	height: 100px;
	overflow: hidden;
}
</style>
<script type="text/javascript">
	function cutPicture() {
		$("#imgpath").Jcrop({
			//aspectRatio:4/3,
			//minSize : [ 100, 75 ],
			//maxSize : [ 300, 225 ],
			onChange : showCoords,
			onSelect : showCoords,
			aspectRatio : 1
		});
		function showCoords(obj) {
			$("#x").val(obj.x);
			$("#y").val(obj.y);
			$("#w").val(obj.w);
			$("#h").val(obj.h);
			if (parseInt(obj.w) > 0) {
				//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
				var rx = $("#preview_box").width() / obj.w;
				var ry = $("#preview_box").height() / obj.h;

				//通过比例值控制图片的样式与显示
				$("#crop_preview").css({
					width : Math.round(rx * $("#imgpath").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
					height : Math.round(rx * $("#imgpath").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积
					marginLeft : "-" + Math.round(rx * obj.x) + "px",
					marginTop : "-" + Math.round(ry * obj.y) + "px"
				});
			}

		}
	}
</script>

<body>
	<!-- 设置校徽 -->
	<!-- 顶栏 -->
	<s:action name="userhomecomm_homeHead" namespace="/user"
		executeResult="true"></s:action>

	<!-- 正文 -->
	<div id="hfContent" class="ar-content">
		<div class="content-main">
			<!-- 学校名称栏 -->
			<s:action name="scomm_schoolMTitle" namespace="/school"
				executeResult="true"></s:action>
			<div class="main-content wrap-bg clearfix">
				<!-- 左侧栏 -->
				<s:action name="scomm_schoolMLeft" namespace="/school"
					executeResult="true"></s:action>
				<!-- 右侧内容 -->
				<div class="ae-right">
					<div class="right-main">
						<div class="right-main-top">
							<div class="binfo-title">
								<span>校徽设置</span>
							</div>
							<div class="right-line"></div>
						</div>
						<div class="right-main-c">
							<div class="info-tab01">
								<div class="tab01-top">
									<div class="c-upavatar-up">
										<input class="input_opacity" type="file" id="file" name="file"
											onchange="txt_path.value=this.value"> <input
											id="txt_path" type="text" class="PY-input"
											readonly="readonly"> <label style="cursor: default;"
											for="file"> <a id="b_selfile" href="javascript:;"><i
												class="liulan-btn"></i> </a> </label> &nbsp;&nbsp;&nbsp;&nbsp; <a
											onclick="upfile();" href="javascript:;"><i
											class="baocun-btn"></i> </a>
									</div>
									<div class="c-upavatar-miaoshu">仅支持JPG、JPEG、GIF、PNG格式，文件小于500K</div>
								</div>
								<div class="tab01-cen clearfix">
									<div id="mainClipping" class="clearfix">
										<div id="imgsrc" class="tab01-cen-l">
											<img id='imgpath' style='width:100%;height:100%;' src="">
											<input type="hidden" id="x" name="x" /> <input type="hidden"
												id="y" name="y" /> <input type="hidden" id="w" name="w" />
											<input type="hidden" id="h" name="h" />
										</div>

										<button id="cut" onclick="getCutImg();" style="display: none;"
											class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
											<span class="ui-button-text">确认</span>
										</button>

									</div>
									<div class="tab01-cen-r">
										<span>校徽预览</span>
										<div class="cen-r-ap">
											<span id="preview_box" class="crop_preview"><img
												id="crop_preview" style="width: 100%;height: 100%;" src="" />
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- footer copyright -->
		<s:action name="userhomecomm_homeFooter" namespace="/user" executeResult="true"></s:action>
		<!-- /footer copyright -->
	</div>
</body>
<script type="text/javascript">

	var imgName = "";
	// 上传文件
	function upfile() {
		var pName = $("#file").val().split("\\")[2];
		if (isnull(pName)) {
			$().message("请选择图片！");
			return;
		}
		var pname1 = pName.substring(pName.lastIndexOf('.')).toLowerCase();
		try {
			$.ajaxFileUpload({
						url : "${aier_url}${aier_urijs}sbinfo_updateSchoolLogo${aier_suffix}?sid=${sid}&photoName="
								+ pname1,
						secureuri : false,
						fileElementId : 'file',
						dataType : 'json',
						success : function(data, status) {
							$('#cut').show();
							$('#imgpath').attr("src",
									"${schoollogo_get_url}" + data.slogo + "");
							$('#crop_preview').attr("src",
									"${schoollogo_get_url}" + data.slogo + "");

							imgName = data.slogo;
							cutPicture();
						},
						error : function(data, status, e) {
							$().message("服务器连接超时");
						}
					});
		} catch (e) {
			$().message("服务器连接超时");
		}
	}

	function getCutImg() {
		if (parseInt($("#x").val()) > 0 && parseInt($("#y").val()) > 0) {
			var fun = function(data) {
				if (data.s == 1) {
					$().message("保存成功");
					$('#cut').hide();
					 location.reload();
					//AvaTemDivP();
				} else {
					$().message("保存失败");
				}
			};
			exeAjax(
					ajaxUrl("${aier_url}${aier_urijs}sbinfo_cutImg${aier_suffix}"),
					fun, {
						"x" : $('#x').val(),
						"y" : $('#y').val(),
						"w" : $('#w').val(),
						"h" : $('#h').val(),
						"slogo" : imgName,
						"sid" : "${sid}"
					});
		} else {
			$().message("请先在图片上划一个选区再单击确认！");
			return;
		}
	}

	function AvaTemDivP() {
		var fun = function(data) {
			if (!isnull(data.slogo)) {

				$('#crop_preview').attr("src", "${schoollogo_get_url}big/" + data.slogo + "");
			} else {
				$('#crop_preview').attr("src", "${schoollogo_get_url}big/${school.slogo }");
			}

		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}sbinfo_serachAvatar${aier_suffix}"),
				fun, {
					sid : "${sid}"
				});

	}
	AvaTemDivP();
</script>
</html>